<template>
  <div>
    <!-- 面包屑 -->
    <div class="breadNav" style="margin: 20px 0 20px 20px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened" :to="{ path: '/integral' }"><a href="/">积分商城</a></el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">商品列表</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">添加商品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 返回 -->
    <el-page-header @back="goBack" :content="title"></el-page-header>
    <!-- 添加商品 表单 -->
    <div class="x_addGoods">
      <!-- 必填带星号 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称:" prop="name">
          <el-input v-model="ruleForm.text" placeholder="输入商品名称"></el-input>
        </el-form-item>
      </el-form>
      <!-- 不带星号 -->
      <div class="x_noStar">
        <el-form :model="ruleForm" :rules="rules" label-width="80px">
          <el-form-item label="简略标题:">
            <el-input v-model="ruleForm.title" placeholder="输入标题"></el-input>
          </el-form-item>
          <el-form-item label="排序:">
            <el-col :span="11">
              <el-input v-model="ruleForm.sort" placeholder="请输入" style="width: 60%;"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="padding-left:20px;font-size:14px;">库存:</el-col>
            <el-col :span="11">
              <el-input v-model="ruleForm.store" placeholder="请输入" style="width: 60%;"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="净重:">
            <el-col :span="11">
              <el-input v-model="ruleForm.kilo" placeholder="请输入" style="width: 60%;"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="padding-left:20px;font-size:14px;">品牌:</el-col>
            <el-col :span="11">
              <el-input v-model="ruleForm.brand" placeholder="请输入" style="width: 60%;"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="关键词:">
            <el-input v-model="ruleForm.keywords" placeholder="以逗号分开,最多5个"></el-input>
          </el-form-item>
          <el-form-item label="描述:">
            <el-input v-model="ruleForm.description" placeholder="请输入商品介绍"></el-input>
          </el-form-item>
          <el-form-item label="药品价格:">
            <el-col :span="11">
              <el-input v-model="ruleForm.mediPrice" placeholder="请输入(元)" style="width: 60%;"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="padding-left:5px;font-size:10px;">所需积分:</el-col>
            <el-col :span="11">
              <el-input v-model="ruleForm.needjur" placeholder="请输入(积分)" style="width: 60%;"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="出售数量:">
            <el-select v-model="ruleForm.saleout">
              <el-option label="件" value="shanghai"></el-option>
              <el-option label="个" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片上传" >
            <!-- 图片上传 -->
            <el-upload action="http://127.0.0.1:7001/api/Xloadimg" :on-success="handleAvatarSuccess" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus">
                <img v-if="ruleForm.img" :src="ruleForm.img" alt="" class="avater">
              </i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存并上架</el-button>
            <el-button type="second" @click="onSubmit2" style="background:orange;">保存到库存</el-button>
            <el-button style="background:gray;" @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>

  </div>
</template>
  
  <script>
import { addListApi } from '../../../api'
export default {
  data() {
    return {
      title: '添加积分商品',
      // 添加 商品表单
      ruleForm: {
        text: '',
        title:'',
        kilo:'',
        brand:'',
        needjur:'',
        saleout:'',
        mediPrice:'',
        keywords:'',
        description:'',
        store:'',
        sort:'',
        img:'',
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
      // 图片上传
      dialogImageUrl: '',
      dialogVisible: false,
    }
  },
  methods: {
    // 返回
    goBack() {
      console.log('go back')
      this.$router.push('/Integral')
    },
    // 添加商品 表单
    onSubmit() {
      // console.log('submit!')
      console.log(this.ruleForm)
      // 添加保存
      addListApi(this.ruleForm).then((res) => {
        this.$router.go(-1)
        console.log(res)
        // this.ruleForm = res.data
        
        this.$router.push('/Integral')
      })
    },
    onSubmit2() {
      // console.log('submit!')
      console.log(this.ruleForm)
    },
    // 图片上传
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.ruleForm.img = `http://127.0.0.1:7001${res.data}`
      // console.log(this.ruleForm.img)
    },
    cancel() {
      this.$router.push('/Integral')
    },
  },
  created() {
    if (this.$route.params.title) {
      this.title = this.$route.params.title
    }
  },
}
</script>
  
  <style lang="scss" scoped>
.x_addGoods {
  width: 800px;
  margin: 20px auto;
}
.x_noStar {
  margin-left: 20px;
}
.avater{
  width:150px;
  height:50px;
}
</style>